<template>
    <div class="page" v-if="showPage">
        <div class="bg-color-box">
            <!--顶部导航栏-->
            <van-nav-bar class="nav-bar-box" :left-arrow="true" @click-left="onClickLeft">
                <div slot="left">
                    <i class="go-back-icon"></i>
                </div>
            </van-nav-bar>
        </div>

        <div class="page-title">欢迎登录</div>

        <!--拜访信息录入-->
        <div class="login-info">
            <van-cell-group>
                <van-field label="手机号" v-model="personPhone" placeholder="请输入手机号" label-width="70px">
                    <i class="icon phone-icon" slot="left-icon"></i>
                    <span v-if="showCountdown" class="get-captcha" slot="button">{{second}}秒重新获取</span>
                    <span v-else class="get-captcha" slot="button" @click="getCaptcha()">获取验证码</span>
                </van-field>

                <van-field label="验证码" v-model="captcha" placeholder="请输入验证码" label-width="70px">
                    <i class="icon short-code-icon" slot="left-icon"></i>
                </van-field>
            </van-cell-group>
        </div>

        <div class="btn-box">
            <van-button block @click="submit()">登录</van-button>
        </div>


        <!--注册提示-->
        <div class="go-register" @click="goRegister()">没有账号，去注册</div>
    </div>
</template>

<script>
    import {NavBar, Field, CellGroup, Button, Toast, Dialog} from 'vant';

    export default {
        name: 'login',

        components: {
            [NavBar.name]: NavBar,
			[CellGroup.name]: CellGroup,
            [Field.name]: Field,
			[Button.name]: Button,
			[Toast.name]: Toast,
			[Dialog.name]: Dialog,
        },

        props: {},

        data() {
            return {
				showPage: false,            //是否显示页面
				timer: null,                //验证码计时器
				showCountdown: false,       //是否显示倒计时
				second: 60,               //重新获取剩余秒数

				personPhone: '',
				captcha: '',
            }
        },

		beforeRouteEnter(to, from, next) {
			if(to.name=='LOGIN' && from.name=='INDEX'){
				next(vm => {
                    vm.tryLogin();    //自动登录
				})

			}else if(to.name == 'LOGIN' && from.name == 'REGISTER'){
				next(vm => {
					vm.showPage = true;
				})

			}else{
				if(parent.WeixinJSBridge){
					parent.WeixinJSBridge.call('closeWindow');
				}
			}
		},

		mounted() {

        },

        methods: {
			//点击返回
			onClickLeft(){
				if(parent.WeixinJSBridge){
					parent.WeixinJSBridge.call('closeWindow');    //关闭当前网页
				}
			},

			//点击去注册
			goRegister(){
				this.$router.push('/register');
			},

        	//尝试用openId登录
			tryLogin(){
				this.$axios.post(this.$api.loginById, {
					openId: this.$Cookies.get('openId'),

				}).then(success => {
					if(success.data.code == '200'){
						//把用户信息保存到cookie
						this.$Cookies.set('personName', success.data.data.personName);
						this.$Cookies.set('personId', success.data.data.personId);
						this.$Cookies.set('personPhone', success.data.data.personPhone);
						this.$Cookies.set('personRole', success.data.data.role);
						this.$Cookies.set('communityName', success.data.data.communityName);
						this.$Cookies.set('communityId', success.data.data.communityId);

						if(this.$Cookies.get('userType') == '3000'){
							this.getEmployee();

						}else{
							this.goToURL();
						}

					}else{
						this.showPage = true;
                    }
				}).catch(error => {
					this.showPage = true;
				})
			},

			//获取员工信息
			getEmployee(){
				this.$axios.post(this.$api.queryEmployee, {
					phoneNumber: this.$Cookies.get('personPhone'),

				}).then(success => {
					if(success.data.code == '200'){
						let data = success.data.data || [];

						if(data.length>0 && data[0].name){
							//覆盖掉个人信息中的小区信息
							this.$Cookies.set('communityName', data[0].name);
							this.$Cookies.set('communityId', data[0].communityId);
                        }

						this.goToURL();
					}
				}).catch(error => {

				})
			},

			//点击获取验证码
			getCaptcha(){
				if(!this.personPhone){
					Toast('请输入手机号');
					return;
				}

				this.$axios.post(this.$api.sendSmsCaptcha, {
					telNo: this.personPhone,
					captchaType: 'login',

				}).then(success => {
					if(success.data.code == '200'){
						Toast('发送成功');
						this.startCountdown();
					}
				}).catch(error => {

				})
			},
			//开始倒计时
			startCountdown(){
				this.showCountdown = true;
				this.second = 60;
				clearInterval(this.timer);

				this.timer = setInterval(() => {
					if(this.second == 1){
						clearInterval(this.timer);
						this.showCountdown = false;
					}else{
						this.second -= 1;
					}
				},1000)
			},

            //点击登录
			submit(){
				//必填信息验证
				if(!this.personPhone || !this.captcha){
					Toast('请录入必填信息');
					return;
				}

				//调用登录接口
				this.$axios.post(this.$api.loginByCap, {
					telNo: this.personPhone,
					captcha: this.captcha,
					captchaType: 'login',

				}).then(success => {
					if(success.data.code == '200'){
						//把用户信息保存到cookie
						this.$Cookies.set('personName', success.data.data.personName);
						this.$Cookies.set('personId', success.data.data.personId);
						this.$Cookies.set('personPhone', success.data.data.personPhone);
						this.$Cookies.set('personRole', success.data.data.role);
						this.$Cookies.set('communityName', success.data.data.communityName);
						this.$Cookies.set('communityId', success.data.data.communityId);

						if(this.$Cookies.get('userType') == '3000'){
							this.getEmployee();

						}else{
							this.goToURL();
						}
					}
				}).catch(error => {

				})
            },

            //根据用户类型跳转到对应的主页
			goToURL(){
				let userType = this.$Cookies.get('userType');

				//userType: 1000 拜访者，2000 业主，3000物业管理
				switch(userType) {
					case '1000':
						this.$router.push('/visit');
						break;

					case '2000':
						this.$router.push('/owner');
						break;

					case '3000':
						//securityStaff保安; propertyManager经理;
						if(this.$Cookies.get('personRole') == 'securityStaff'){
							this.$router.push('/securityManage');

                        }else if(this.$Cookies.get('personRole') == 'propertyManager'){
							this.$router.push('/propertyManage');

                        }else{
                        	//点物业管理进来之后没有权限就跳到个人中心页
							this.$router.push('/personalInfo');
                        }
						break;

					default:
						Toast('无法识别用户类型');
						break;
				}
			}

        },
    }
</script>

<style lang="scss" scoped>
    .page{
        background: url("../assets/images/bg-login.jpg") no-repeat;
        background-size: cover;
    }
    .bg-color-box{
        background: none;
    }

    .page-title{
        font-size: 26px;
        font-weight: bold;
        color: white;
        text-align: center;
        margin-top: 50px;
    }

    .login-info{
        padding: 0 20px;
        margin-top: 40px;

        .icon{
            display: inline-block;
            width: 16px;
            height: 16px;
            vertical-align: text-top;

            &.phone-icon{
                background: url("../assets/images/phone-icon.png") no-repeat;
                background-size: cover;
            }
            &.short-code-icon{
                background: url("../assets/images/short-code-icon.png") no-repeat;
                background-size: cover;
            }
        }
        /*获取验证码*/
        .get-captcha{
            font-size: 14px;
            color: white;
        }

        /*表单样式覆盖*/
        .van-cell-group{
            background-color: transparent;

            &::after {
                border: none;
            }

            .van-cell{
                background-color: transparent;
                border-bottom: 1px solid #74ddbb;
                padding-top: 16px;
                padding-bottom: 16px;
                font-size: 15px;
                color: white;

                &::after {
                    border: none;
                }
            }

        }
    }

    /*提交按钮*/
    .btn-box{
        width: 86%;
        margin: 0 auto;
        margin-top: 40px;

        .van-button--default {
            background-color: white;
            border-radius: 25px;
        }
        .van-button__text{
            font-size: 18px;
            font-weight: bold;
            color: #61dda3;
        }
    }

    /*去注册*/
    .go-register{
        text-align: center;
        font-size: 15px;
        color: white;
        text-decoration: underline;
        margin-top: 60px;
    }
</style>

<style>
    .login-info .van-field__control{
        color: white;
        font-size: 15px;
    }

    .login-info input::-webkit-input-placeholder{
        color: #96e4c5;
    }
</style>

